<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('后台管理')"/>
</head>
<body class="hold-transition skin-blue sidebar-mini layout-boxed">
<div class="wrapper">
    <th:block th:include="include :: headbar"/>
    <th:block th:include="include :: sidebar"/>
    <div class="content-wrapper">
        <section class="content-header">
            <h1>&nbsp;</h1>
            <ol class="breadcrumb">
                <li><a href="/index"><i class="fa fa-dashboard"></i> 首页</a></li>
                <li><a href="#">车模型订单管理</a></li>
                <li class="active"> 车模型订单列表</li>
            </ol>
        </section>
        <section class="content">
            <div class="box box-solid">
                <form class="box-header with-border form-inline" id="form">
                    <select class="form-control input-sm" name="paymentResult">
                        <option value="">全部</option>
                        <option value="0">未付款</option>
                        <option value="1">已付款</option>
                    </select>
                    <input type="text" class="form-control input-sm" placeholder="用户名" name="username">
                    <input type="text" class="form-control input-sm datetimepicker" autocomplete="off"
                           placeholder="结账时间(起)"
                           name="startTime">
                    <input type="text" class="form-control input-sm datetimepicker" autocomplete="off"
                           placeholder="结账时间(止)"
                           name="endTime">
                    <button type="button" class="btn btn-success btn-sm btn-flat" onclick="$.table.search('form')"><i
                            class="fa fa-search"></i> 搜索
                    </button>
                    <button type="button" class="btn btn-warning btn-sm btn-flat" onclick="reset()"><i
                            class="fa fa-edit"></i> 重置
                    </button>
                    <button type="button" class="btn btn-primary btn-sm btn-flat" onclick="download()"><i
                            class="glyphicon glyphicon-download"></i> 导出
                    </button>
                </form>
                <div class="box-body">
                    <div class="btn-group-sm form-inline" id="toolbar" order="group">
                        <!-- <button type="button" class="btn btn-success btn-sm btn-flat" onclick="$.operate.openUrl('订单明细', '/mall/order/detail/{id}')"><i class="fa fa-plus"></i> 详情</button> -->
                        <!--                        <button type="button" class="btn btn-danger btn-sm btn-flat" onclick="$.operate.remove()"><i-->
                        <!--                                class="fa fa-remove"></i> 删除-->
                        <!--                        </button>-->
                    </div>
                    <table id="bootstrap-table" data-mobile-responsive="true"
                           ondblclick="$.operate.openUrl('订单明细', '/mall/order/detail/{id}')">
                    </table>
                    <!-- 折叠表格 http://www.blackzs.com/archives/972 -->
                </div>
            </div>
        </section>
    </div>
    <th:block th:include="include :: copyright"/>
</div>
<th:block th:include="include :: footer"/>
<script th:inline="javascript">

    var prefix = "/mall/order";
    $(function () {
        var options = {
            url: prefix + "/list",
            sortable: true,
            sortName: "total_price",
            sortOrder: "desc",
            uniqueId: 'orderId',
            modalName: "",
            modalWidth: 350,
            modalHeight: 400,
            // queryParams: function (params) {
            //     var temp = {
            //         sort: params.sort,
            //         sortOrder: params.order
            //     };
            //     return temp;
            // },
            columns: [
                {radio: true},
                {field: 'orderId', title: '订单号'},
                {field: 'username', title: '用户名'},
                {field: 'deviceId', title: '车机编号'},
                {field: 'totalPrice', title: '总价格'},
                {field: 'paymentResult', title: '付款结果', formatter: typeFormatter},
                {field: 'size', title: '数量'},
                {field: 'paymentTime', title: '付款时间', sortable: 'true'}
            ]
        };
        $.table.init(options);
    });


    function typeFormatter(value, row, index) {
        if (value === 1) {
            return '<span class="label label-success">已付款</span>';
        } else {
            return '<span class="label label-warning">未付款</span>';
        }
    }

    function reset() {
        $('form').not(":select :input :button").val("").remove("selected")
    }

    function statusFormatter(value, row, index) {
        if (row.status === 1) {
            return '<i class=\"fa fa-toggle-on text-info fa-lg\" onclick="disable(\'' + row.orderId + '\')"></i> ';
        } else {
            return '<i class=\"fa fa-toggle-off text-info fa-lg\" onclick="enable(\'' + row.orderId + '\')"></i> ';
        }
    }

    function disable(orderId) {
        $.post(prefix + "/changeStatus", {"orderId": orderId, "status": 0}, function (resp) {
            $.table.refresh();
        });
    }

    function enable(orderId) {
        $.post(prefix + "/changeStatus", {"orderId": orderId, "status": 1}, function (resp) {
            $.table.refresh();
        });
    }

    function download() {
        var oReq = new XMLHttpRequest();
        oReq.open("GET", prefix + "/export/order", true);
        oReq.responseType = "blob";
        var date = new Date();
        var month = date.getMonth() + 1;
        var now = date.getFullYear() + "-" + month + "-" + date.getDate();
        oReq.onload = function (oEvent) {
            var content = oReq.response;

            var elink = document.createElement('a');
            elink.download = "车模型订单报表" + now
                + ".xlsx";
            elink.style.display = 'none';

            var blob = new Blob([content], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'});
            elink.href = URL.createObjectURL(blob);

            document.body.appendChild(elink);
            elink.click();

            document.body.removeChild(elink);
            window.URL.revokeObjectURL(elink.href);
        };
        oReq.send();
    }
</script>
</body>
</html>
